import { Button } from 'antd';
import {
  MainModalContext,
  useMainModal
} from '../../../../../../packages/@hdtd/components/src/index';
import AA from './modal-content/AA';
import BB from './modal-content/BB';
import { EModalType, EModalType1 } from './exports';
// import { MainModalContext, useMainModal } from '@hdtd/components/test';
import { useState, useEffect, use, memo } from 'react';
import { useNavigate } from 'react-router';

interface IModalOpenData {
  name: string;
  age: number;
}

const MMTest = () => {
  const navigate = useNavigate();
  const [count, setCount] = useState(1);
  const { setChildrenData, getChildrenData } = use(MainModalContext)!;
  const [open1] = useMainModal<EModalType1>(
    (type, data, api) => {
      switch (type) {
        case EModalType1.AA:
          api.setChildren(<div>我是modal1模态框内容 AA1 {count}</div>);
          api.setProps({
            title: 'modal1 模态框'
          });
          break;
        case EModalType1.BB:
          api.setChildren(<div>我是modal1模态框内容 BB1 {count}</div>);
          api.setProps({
            title: 'modal1 模态框'
          });
          break;
      }
    },
    [count],
    'modal1'
  );
  const [open] = useMainModal<EModalType, IModalOpenData>(
    (type, data, api) => {
      console.log('主函数执行了', count);
      switch (type) {
        case EModalType.AA:
          api.setChildren(<AA />);
          api.setProps({
            title: 'default 模态框'
          });
          break;
        case EModalType.BB:
          // console.log(getChildrenData());
          api.setChildren(<BB count={count} onClick={() => setCount((value) => value + 1)} />);
          api.setProps({
            title: 'default 模态框'
          });
          break;
      }
      return {
        // destroyOnClose: true
      };
    },
    [count]
  );

  useEffect(() => {
    // setTimeout(() => {
    //   setChildrenData({ name: '张三', age: 18 });
    // }, 5000);
    setInterval(() => {
      setCount((value) => value + 1);
    }, 1000);
    console.log('容器挂载');
    return () => {
      console.log('容器卸载');
    };
  }, []);
  return (
    <div>
      <Button onClick={() => open(EModalType.AA)}>展示default AA </Button>
      <Button onClick={() => open(EModalType.BB)}>展示default BB</Button>
    </div>
  );
};

export default MMTest;
